<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/icons-extra.css"/>
		<link href="css/my.css" rel="stylesheet" />
		<style>
		</style>
	</head>

	<body>
		<nav class="mui-bar mui-bar-tab bc2">
			<a id="defaultTab" class="mui-tab-item mui-active" href="home.html">
				<span class="mui-icon-extra mui-icon-extra-lamp"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="top.html">
				<span class="mui-icon-extra mui-icon-extra-rank"></span>
				<span class="mui-tab-label">排行</span>
			</a> 
			<a class="mui-tab-item" href="collection.html">
				<span class="mui-icon-extra mui-icon-extra-xiaoshuo"></span>
				<span class="mui-tab-label">书架</span>
			</a>
			<!-- <a class="mui-tab-item" href="category.html">
				<span class="mui-icon-extra mui-icon-extra-filter"></span>
				<span class="mui-tab-label">分类</span>
			</a> -->
			<a class="mui-tab-item" href="my.html">
				<span class="mui-icon-extra mui-icon-extra-class"></span>
				<span class="mui-tab-label">更多</span>
			</a>
		</nav>

	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/config.js"></script>
	<script>
		mui.plusReady(function(){
		    var pages = [
				"home.html",
				"top.html",
				"collection.html",
				// "category.html",
				"my.html"
				];
		    var arr = document.getElementsByClassName("mui-tab-item")
		    var styles = {
		        top:"0px",
		        bottom:"51px"
		    }
		    var pageArr = [];
		    var slef = plus.webview.currentWebview();
		    for(var i=0; i<arr.length; i++){
		        // 有几个选项卡，需要创建几个子页面
		        var page = plus.webview.create(pages[i],pages[i],styles);
		        pageArr.push(page);
		        !function(i){
		            arr[i].addEventListener("tap",function(){
		                // 让当前页面(i)显示，不是当前页面隐藏
		                for(var j=0; j<pageArr.length; j++){
		                    if(j!=i) pageArr[j].hide();
		                    else {
								if(pageArr[j].id == 'collection.html'){
									// pageArr[j] = plus.webview.create("collection.html","collection.html",styles);
									pageArr[j].show();
									pageArr[j].evalJS('init()');
								}else if(pageArr[j].id == 'home.html'){
									pageArr[j].show();
									pageArr[j].evalJS('ago()');
								}else{
									pageArr[j].show();
								}
							}
		                }
		                /* 让新创建的webview，追加合并到当前的窗口上。合并成一个窗口。
		                 * 目的：将父子窗口合并成一个页面，实现同开同关的效果。 避免点击返回安监室，子页面先关闭，而父页面的头部和尾部没有关闭的BUG。
		                 */
		                slef.append(pageArr[i]);
		            })
		        }(i);
		    }
		    // 默认触发第0个选项卡的tap事件。
		    mui.trigger(arr[0],"tap");
			
		});
	</script>
</html>
